{% extends "base.html" %} {% block html_title %} 设置手动代包手 {% endblock html_title %} {% block page_title %} 设置手动代包手 {% endblock page_title %} {% block content %}
<div id="content">
    <el-row>
        <el-col :span="12">
            {% if current_user.is_admin %}
            <button type="primary" @click="onGrabberSelectFormOpen" style='padding:7px 20px;outline:none;border:none;margin-left:10px;border-radius:5px;background:#3c8dbc;color:white'>从现有群成员添加手动代包手</button>
            {% endif %}
        </el-col>
    </el-row>
    <el-row>
        <el-table :data="grabbers">
            <el-table-column prop="nickname" label="玩家昵称">
            </el-table-column>
            <el-table-column prop="alias" label="微信号">
            </el-table-column>
        </el-table>
    </el-row>
    <el-row>
        <el-pagination background layout="prev, pager, next" :total="grabberCount" page-size=30 :current-page.sync="currentGrabberPage" @current-change="onCurrentGrabberPageChanged">
        </el-pagination>
    </el-row>
    {% if current_user.is_admin %}
    <el-dialog :visible.sync="exceptGrabberSelectFormVisible" title="添加手动代包手">
        <el-row>
            <input type="text" placeholder='输入手动代包手昵称' @keyup.enter='queryByNickname' v-model="qs" style='padding:7px;border-radius: 5px;border:none'> {#
            <input type="text" placeholder='输入上线昵称' v-model="qs" @input="queryByNickname" style='padding:7px;border-radius: 5px;border:none'>#}
            <el-button type="primary" @click="queryByNickname" size="mini">搜索</el-button>
        </el-row>
        <el-row>
            <el-table :data="players" style="height: 400px; overflow-y: auto;">
                <el-table-column prop="nickname" label="昵称">
                </el-table-column>
                <el-table-column prop="alias" label="微信号">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button :disabled="grabberWxids.includes(scope.row.wxid)" type="success" size="mini"
                                   @click="selectGrabber(scope.row)">
                            指定
                        </el-button>
                        <el-button :disabled="!grabberWxids.includes(scope.row.wxid)" type="danger" size="mini"
                                   @click="revokeGrabber(scope.row)">
                            取消
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination background layout="prev, pager, next" :total="playerCount" page-size=30 :current-page.sync="currentPage" @current-change="onCurrentPageChanged">
            </el-pagination>
        </el-row>
    </el-dialog>
    <el-dialog :visible.sync="revokeGrabberConfirmFormVisible" title="确认取消手动代包手">
        <el-form v-loading="revokeGrabberConfirmFormBlocking" element-loading-text="取消手动代包手 &hellip;" element-loading-spinner="el-icon-loading">
            <el-form-item>
                <el-button type="danger" @click="onConfirmRevokeGrabber">取消手动代包手</el-button>
                <el-button @click="revokeGrabberConfirmFormVisible = false" class='el-dialog__close'>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    {% endif %}
</div>
{% endblock content %} {% block js %}
<script>
var container = new Vue({
    el: "#content",
    data: function() {
        return {
            currentPage: 1,
            qs: '',
            playerCount: 0,
            players: [],
            grabberCount: 0,
            grabbers: [],
            currentGrabberPage: 1,
            grabberWxids: [],
            exceptGrabberSelectFormVisible: false,
            revokeGrabberConfirmFormVisible: false,
            revokeGrabberConfirmFormBlocking: false,
            targetGrabberWxid: ''
        }
    },
    methods: {
        onCurrentGrabberPageChanged: function(currentPage) {
            this.refreshExceptGrabberList();
        },
        onCurrentPageChanged: function(currentPage) {
            this.refreshPlayerList();
        },
        onGrabberSelectFormOpen: function() {
            this.refreshPlayerList();
            this.exceptGrabberSelectFormVisible = true;
        },
        selectGrabber: function(row) {
            this.$http.post(
                '/api/except_grabber/',
                {wxid: row.wxid}
            ).then((res) => {
                this.refreshPlayerList();
                this.refreshExceptGrabberList();
                this.$notify({
                    title: "成功",
                    message: "添加手动代包手成功",
                    type: "success"
                });
            }).catch((err) => {
                this.$notify.error({
                    title: "添加手动代包手失败",
                    message: err.response.data.message
                });
            });
        },
        revokeGrabber: function(row) {
            this.revokeGrabberConfirmFormVisible = true;
            this.targetGrabberWxid = row.wxid
        },
        onConfirmRevokeGrabber: function () {
            if (! this.targetGrabberWxid) {
                return;
            }
            this.revokeGrabberConfirmFormBlocking = true;
            var params = {wxid: this.targetGrabberWxid};
            this.$http.delete('/api/except_grabber/',{
                data: params
            }).then((res) => {
                this.refreshPlayerList();
                this.refreshExceptGrabberList();
                this.$notify({
                    title: "成功",
                    message: "取消手动代包手成功",
                    type: "success"
                });
                this.revokeGrabberConfirmFormBlocking = false;
                this.revokeGrabberConfirmFormVisible = false
            }).catch((err) => {
                this.$notify.error({
                    title: "取消手动代包手失败",
                    message: err.response.data.message
                });
                this.revokeGrabberConfirmFormBlocking = false;
                this.revokeGrabberConfirmFormVisible = false
            });
        },
        queryByNickname: function(v) {
            this.refreshPlayerList();
        },
        refreshPlayerList: function() {
            var params = {};
            params.page = this.currentPage - 1;
            if (this.qs !== '') {
                params.qs = this.qs;
            }
            this.$http.get('/api/player/', {
                params: params
            }).then((res) => {
                this.players = res.data.players;
                this.playerCount = res.data.count;
            });
        },
        refreshExceptGrabberList: function() {
            this.$http.get('/api/except_grabber/').then((res) => {
                this.grabbers = res.data.grabbers;
                this.grabberCount = res.data.count;
                this.grabberWxids = [];
                for (var i=0; i<this.grabbers.length; i++) {
                    this.grabberWxids.push(this.grabbers[i].wxid)
                }
            });
        }
    },
    created: function() {
        this.refreshExceptGrabberList();
    }
});
</script>
{% endblock js %}